<template>
  <div class="level">
    <div class="item" v-for="(item, index) in satisfyData" :key="index">
      <div class="box">
        <div class="in">
          <canvas :ref="item.key"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Board from './board';

export default {
  name: 'satisfaction-level',
  props: {
    satisfyData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      boards: []
    };
  },
  watch: {},
  mounted() {
    this.boards = this.satisfyData.map(e => {
      e.el = this.$refs[e.key][0];
      return new Board(e);
    });
  },
  methods: {
    reflowBoard() {
      this.boards.forEach(board => {
        board.init(board);
      });
    },
    updateBoard(index, rate) {
      this.boards[index].setRate(rate);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .level
    display : flex
    margin : 20px 0

  .item
    flex : 1
    margin-right : 20px
    &:last-of-type
      margin-right : 0

  .box
    position : relative
    padding-top : 100%
    width : 100%
    height : 0
    font-size : 24px
    background : #fff
    border-radius : 6px
    overflow : hidden

  .in
    position : absolute
    top : 50%
    left : 50%
    transform : translate(-50%, -50%)
    width : 100%
    height : 100%

</style>
